<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>召唤师个人信息</title>
	<link rel="icon" href="img/tubiao.png">
	<style type="text/css">
		body {
			background: url('img/bj.jpg')no-repeat;
			background-size: 100% 100%;
			background-attachment: fixed;
		}

		.dakuang {
			/* margin-top: 50px;
            margin-bottom: 50px; */
			width: 1000px;
			height: 1000px;
			background-color: rgb(246, 250, 249);
			border: 4px solid rgb(248, 247, 247);
			margin: 0px auto 0px;
			border-radius: 10px;
		}

		.d1 {
			/* margin: 0; */
			width: 998px;
			height: 70px;
			border: 1px solid rgb(247, 247, 248);
			background-color: #040108;
			border-radius: 10px;
		}

		.yxlm {
			float: left;
			margin: 15px;
			width: 110px;
			height: 40px;
			/* border: 1px solid blue; */
			background-image: url('img/yxlm.png');
			background-size: 100% 100%;
		}

		.d1 h1 {
			width: 700px;
			height: 40px;
			margin: 15px;
			text-decoration: none;
			font-size: 25px;
			color: rgb(252, 250, 250);
			/* border: 1px solid rgb(19, 17, 13);            */
			font-weight: 1000;
			/* border: 1px solid rgb(17, 1, 1); */
			font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		}

		.d2 {
			float: left;
			width: 100px;
			height: 926px;
			border: 1px solid rgb(244, 247, 244);
			border-radius: 10px;
			background-color: rgb(16, 6, 70);
		}

		.用户1 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			background-color: rgb(0, 89, 255);
			border-radius: 5px;
			line-height: 35px;
		}

		.用户2 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
			text-align: center;
			line-height: 35px;
		}

		.用户3 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			line-height: 35px;
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
		}

		.用户4 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			line-height: 35px;
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
		}

		.用户5 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			line-height: 35px;
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
		}

		.用户6 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			line-height: 35px;
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
		}

		.用户7 {
			margin: 5px;
			width: 85px;
			height: 35px;
			/* border: 1px solid rgb(19, 17, 13); */
			text-align: center;
			line-height: 35px;
			background-color: rgb(0, 153, 255);
			border-radius: 5px;
		}

		.d2 a {
			text-decoration: none;
			color: rgb(247, 246, 243);
			font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		}

		.d3 {
			float: left;
			width: 896px;
			height: 926px;
			border: 1px solid rgb(245, 243, 241);
			border-radius: 1%;
			background-color: rgb(219, 208, 208);
		}

		.d3_首页框 a {
			margin-top: 40px;
			margin-left: 20px;
			text-decoration: none;
			font-size: 20px;
			color: rgb(246, 247, 248);
			background-color: rgb(2, 6, 51);
			border-radius: 5px;
			border: 1px solid rgb(19, 17, 13);
		}

		.d3_个人大框 {
			float: left;
			margin: 20px;
			width: 250px;
			height: 820px;
			background-color: ivory;
			border: 1px solid rgb(252, 251, 250);
			border-radius: 10px;
		}

		.d3_头像框 {
			width: 96px;
			height: 96px;
			background-color: ivory;
			border: 1px solid rgb(19, 17, 13);
			margin: 50px auto 0px;
			background-image: url('img/xiaoji.jpg');
			background-size: 100% 100%;
			border-radius: 100%;
			background-color: rgb(228, 247, 240);
		}

		.d3_个性框 {
			width: 170px;
			height: 90px;
			background-color: ivory;
			border: 1px solid rgb(245, 244, 242);
			margin: 20px auto 0px;
			border-radius: 5%;
			background-color: rgb(228, 247, 240);
		}

		.d3_个性框 h6 {
			font-size: 5px;
			margin: 2px;
			text-align: center;
		}

		.d3_个性框 h5 {
			font-size: 2px;
			margin: 2px;
			text-align: center;
		}

		.d3_框1 {
			width: 170px;
			height: 30px;
			border: 1px solid rgb(250, 250, 249);
			margin: 20px auto 0px;
			border-radius: 5%;
			background-color: rgb(228, 247, 240);
			text-align: center;
		}

		.d3_框2 {
			margin-top: 40px;
			margin-left: 20px;
			width: 120px;
			height: 25px;
			/* border: 1px solid rgb(19, 17, 13); */
			border-radius: 5%;
			background-color: darkgrey;
			border-radius: 5px;
			text-align: center;
		}

		#d3_框3 {
			width: 220px;
			height: 350px;
			border: 1px solid rgb(248, 248, 247);
			margin: 20px auto 0px;
			background-color: rgb(228, 247, 240);
			border-radius: 3%
		}

		.游戏水平框 {
			float: left;
			margin: 20px;
			width: 550px;
			height: 450px;
			background-color: ivory;
			border: 1px solid rgb(252, 252, 252);
			border-radius: 3%;
		}

		.左 {
			margin: 5px;
			float: left;
			width: 170px;
			height: 170px;
			border: 1px solid rgb(250, 249, 247);
			background-image: url('img/yasuo1.jpg');
			background-size: 100% 100%;
			border-radius: 5%;
		}

		.中 {
			margin: 5px;
			float: left;
			width: 170px;
			height: 170px;
			border: 1px solid rgb(253, 253, 252);
			background-image: url('img/yonen2.jpg');
			background-size: 100% 100%;
			border-radius: 5%;
		}

		.右 {
			margin: 5px;
			float: left;
			width: 170px;
			height: 170px;
			border: 1px solid rgb(250, 249, 247);
			background-image: url('img/jianmo1.jpg');
			background-size: 100% 100%;
			border-radius: 5%;
		}

		.总杀 {
			float: left;
			margin: 10px;
			width: 530px;
			height: 160px;
			border: 1px solid rgb(250, 250, 250);
			border-radius: 5px;
			background-color: rgb(228, 247, 240);
		}

		/* .总死 {
            float: left;
            margin: 10px;
            width: 245px;
            height: 70px;
            border: 1px solid rgb(19, 17, 13);
            border-radius: 5px;
            background-color: rgb(228, 247, 240);
        } */

		.上框 span {
			margin-left: 50px;
			background-color: rgb(228, 247, 240);
			border-radius: 10px;
		}

		.总杀 span {
			margin-left: 35px;
			background-color: rgb(228, 247, 240);
			border-radius: 10px;
		}

		.动态化数据框 {
			margin-left: 20px;
			margin-top: 0px;
			float: left;
			width: 550px;
			height: 350px;
			background-color: ivory;
			border: 1px solid rgb(252, 251, 251);
			border-radius: 10px;
		}

		#left {
			float: left;
			margin-left: 5px;
			margin-top: 0px;
			width: 260px;
			height: 290px;
			border: 1px solid rgb(252, 251, 251);
			border-radius: 3%;
			background-color: rgb(228, 247, 240);
		}

		#right {
			float: left;
			margin-left: 5px;
			margin-top: 0px;
			width: 260px;
			height: 290px;
			border: 1px solid rgb(250, 250, 250);
			border-radius: 3%;
			background-color: rgb(228, 247, 240);
		}

		.a1 {
			color: rgb(252, 248, 248);
			text-decoration: none;
		}

		.a1:hover {
			color: #e91515;
		}

		.a {
			color: rgb(12, 1, 1);
			text-decoration: none;
		}

		.a:hover {
			color: #e91515;
		}

		#dcopy {
			width: 100%;
			height: 100px;
			background-color: #e3e2e2;
			color: #9f9378;
			font-size: 16px;
		}
	</style>
	<script src="js/echarts.min.js"></script>
</head>

<body>


	<div class="dakuang">
		<div class="d1">
			<div class="yxlm"></div>
			<h1>欢迎您，亲爱的召唤师!</h1>
		</div>
		<div class="d2">
			<div class="用户1">
				<a href="" class="a1">用户</a>
			</div>
			<div class="用户2">
				<a href="xxbj.html" class="a1">编辑页</a>
			</div>
			<div class="用户4">
				<a href="listinf_xbtzy.html" class="a1">列表页</a>
			</div>
			<!--<div class="用户5"><a href="https://lpl.qq.com/es/ticket.shtml" class="a1">购票页</a></div>-->
			<div class="用户6">
				<a href="https://space.bilibili.com/50329118?spm_id_from=333.337.0.0" class="a1">视频页</a>
			</div>
			<!--<div class="用户7"><a href="https://lpl.qq.com/web202301/live.html" class="a1">直播页</a></div>-->

		</div>
		<div class="d3">
			<div class="d3_首页框">
				<span>
					<h3><a href="index_xbtzy.html" class="a1">←返回首页</a></h3>
				</span>

			</div>
			<div class="d3_个人大框">
				<h3
					style="margin-left: 20px;background-color: darkgrey;width: 100px; height:30px ;border-radius: 5px;text-align: center;">
					个人资料</h3>
				<div class="d3_头像框"></div>
				<div class="d3_个性框">
					<h5>
						<a id="s1" class='a' href="xxbj.html" style="text-decoration: none;">昵称：心慢慢就暗了</a>
					</h5>
					<h6>
						<a id="s2" class='a' href="xxbj.html" style="text-decoration: none;">出生地：艾欧尼亚</a>
					</h6>
					<h6>
						<a id="s3" class='a' href="xxbj.html"
							style="text-decoration: none;">感言：时间不在于你拥有多少，而在于你怎样使用————艾克</a>
					</h6>
				</div>
				<div class="d3_框1"><span><a id="t1" class='a' href="xxbj.html"
							style="text-decoration: none;">当前段位：永恒钻石</a></span></div>
				<div class="d3_框2">
					<h3>日周活跃度</h3>
				</div>
				<div id="d3_框3">
				</div>
			</div>
			<div class="游戏水平框">
				<h3
					style="margin-left: 10px;background-color: darkgrey;width: 200px; height:30px ;border-radius: 5px;text-align: center;">
					常用英雄(最近战绩)</h3>
				<div class="左">
				</div>
				<div class="中">
				</div>
				<div class="右">
				</div>

				<div class="上框">
					<span>英雄</span> <span>战况</span> <span>K/D/A</span> <span>模式</span> <span>对战日期</span></div>


				<div class="总杀" style="overflow-y: scroll;">

					<lu style="list-style-type: none;">
						<li><span class="yx"> 黑暗之女 </span> <span class="zs">胜利</span> <span class="kda">8/8/12</span> <span class="ms">大乱斗</span> <span>昨天
								13：15</span></li>
						<li><span class="yx"> 正义巨像 </span> <span class="zs">胜利</span> <span class="kda">5/5/21</span><span class="ms">大乱斗</span> <span>昨天
								12：35</span></li>
						<li><span class="yx"> 疾风剑豪 </span> <span class="zs">失败</span> <span class="kda">16/7/13</span><span class="ms">大乱斗</span> <span>前天
								15：45</span></li>
						<li><span class="yx"> 赏金猎人 </span> <span class="zs">胜利</span> <span class="kda">2/8/21</span><span class="ms">大乱斗</span>
							<span>前天15：27</span>
						</li>
						<li><span class="yx"> 寒冰射手 </span> <span class="zs">胜利</span> <span class="kda">7/10/22</span><span class="ms">大乱斗</span> <span>前天
								15：14</span></li>
						<li><span class="yx"> 疾风剑豪 </span> <span class="zs">失败</span> <span class="kda">5/1/18</span><span class="ms">大乱斗</span> <span>前天
								15：03</span></li>
						<li><span class="yx"> 疾风剑豪 </span> <span class="zs">失败</span> <span class="kda">6/8/17</span> <span class="ms">大乱斗</span>
							<span>前天
								21：15</span></li>
						<li><span class="yx"> 暗裔剑魔 </span> <span class="zs">失败</span> <span class="kda">15/9/20</span><span class="ms">大乱斗</span>
							<span>前天
								21：00</span></li>
						<li><span class="yx"> 暗裔剑魔 </span> <span class="zs">失败</span> <span class="kda"> 5/5/14</span><span class="ms">大乱斗</span>
							<span>前天
								01：15</span></li>
						<li><span class="yx"> 封魔剑魂 </span> <span class="zs">胜利</span> <span class="kda">22/8/16</span><span class="ms">大乱斗</span>
							<span>前天
								13：15</span></li>
					</lu>
				</div>

			</div>
			<div class="动态化数据框">
				<h3 style="margin-left: 10px;margin-top: 5px;
                    background-color: darkgrey;width: 200px; height:30px ;border-radius: 5px;text-align: center;">
					动态实力变化图</h3>
				<div id="left"></div>
				<div id="right"></div>
			</div>
		</div>
		<div id="dcopy">
			<br>
			<p align="center"> &copy; 版权由计算2201蒋杵峻归属，未经允许不得复制、镜像</p>
			<br>
			<p align="center">本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。</p>
		</div>

	</div>
















	<script>
		var mychart2 = echarts.init(document.getElementById('d3_框3'));
		option2 = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					// Use axis to trigger tooltip
					type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
				}
			},
			legend: {},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value'
			},
			yAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			series: [
				{
					name: '0-5时',
					type: 'bar',
					stack: 'total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [320, 302, 301, 334, 390, 330, 320]
				},
				{
					name: '6-10时',
					type: 'bar',
					stack: 'total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [420, 432, 501, 634, 440, 230, 210]
				},
				{
					name: '12-16时',
					type: 'bar',
					stack: 'total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [1200, 985, 641, 834, 790, 330, 1310]
				},
				{
					name: '17-22时',
					type: 'bar',
					stack: 'total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [150, 212, 201, 154, 190, 330, 410]
				},
				{
					name: '23-24时',
					type: 'bar',
					stack: 'total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [820, 832, 901, 934, 1290, 1330, 1320]
				}
			]
		};

		mychart2.setOption(option2);



		var mychart1 = echarts.init(document.getElementById('left'));
		var option1 = {
			title: {
				// text: ''
			},
			legend: {
				data: ['当段实力', '同段玩家(均)']
			},
			radar: {
				// shape: 'circle',
				indicator: [
					{ name: '经济差', max: 5000 },
					{ name: '承伤', max: 20000 },
					{ name: '均伤', max: 30000 },
					{ name: '伤害转化', max: 38000 },
					{ name: '生存', max: 52000 },
					{ name: '经济', max: 25000 }
				]
			},
			series: [
				{
					name: '当段实力 vs 同段玩家(均)',
					type: 'radar',
					data: [
						{
							value: [5200, 15000, 20000, 35000, 50000, 18000],
							name: '当段实力'
						},
						{
							value: [5000, 14000, 28000, 26000, 42000, 21000],
							name: '同段玩家(均)'
						}
					]
				}
			]
		};
		mychart1.setOption(option1);



		var mychart = echarts.init(document.getElementById('right'));
		var option = {
			legend: {
				top: 'bottom '
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			series: [
				{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: [30, 60],
					center: ['50%', '65%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: [
						{ value: 99, name: '总场次' },
						{ value: 50, name: '总击杀' },
						{ value: 60, name: '总助攻' },
						{ value: 52, name: '总死亡' },
						{ value: 12, name: '均补刀' },
						{ value: 30, name: '均插眼' },
						{ value: 22, name: '均排眼' },
						{ value: 18, name: '均团率' }
					]
				}
			]
		};
		mychart.setOption(option);
	</script>

	<script>
		searchid = function () {
            var id = "";
            var url = window.location.href;
            var start = url.indexOf('?');
            id = url.substring(start + 1, url.indexOf('id$'));
            return id;
        }
        var usename = searchid();
        usename = unescape(usename);
        console.log(usename);
        function check() {
            var arr = [];
            arr = localStorage.getItem(usename).split(',');
            return arr;
        }
        var arr=new Array;
        arr=check();
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
		//from 9 to 18;

		gethestory=function(i){
			return arr[i].split(';');
		}

		var tmd=[];
		for(var i=9;i<=18;i++){
			tmd.push(gethestory(i))
		}
		console.log(tmd.length);
		
		for(var t=0;t<tmd.length;t++){
			console.log(tmd[t]);
		}
		// var usename = searchid();
		// usename = unescape(usename);
		// console.log(usename);
		// function check() {
		// 	var arr = [];
		// 	arr = localStorage.getItem(usename).split(',');
		// 	return arr;
		// }
		// function star(touxiang,name,diqu,ganyan,duanwei,yx1,yx2,yx3) 
        var yingxiong=["黑暗之女","狂战士","正义巨像","卡牌大师","德邦总管","亡灵战神","麦林炮手","疾风剑豪","封魔剑魂","熔岩巨兽","荒漠屠夫","暗夜猎手","暗裔剑魔","无双剑姬","诺克萨斯","虚空之眼","生化魔人","迷失之牙","祖安花火","暴走萝莉"]


		var mofan = document.getElementById('s1');
		mofan.innerHTML = arr[2];
		var diqu = document.getElementById('s2');
		diqu.innerHTML = arr[3];
		var ganyan = document.getElementById('s3');
		ganyan.innerHTML = arr[4];
		var duanwei = document.getElementById('t1');
		duanwei.innerHTML = arr[5];
		var yx1 = document.getElementsByClassName('左');
		yx1.url = arr[6];
		var yx2 = document.getElementsByClassName('中')
		yx2.url = arr[7];
		var yx3 = document.getElementsByClassName('右')
		yx3.url = arr[8];


		var yx = document.getElementsByClassName('yx')
		yx[0].innerHTML = yingxiong[tmd[0][0]];
		yx[1].innerHTML = yingxiong[tmd[1][0]];
		yx[2].innerHTML = yingxiong[tmd[2][0]];
		yx[3].innerHTML = yingxiong[tmd[3][0]];
		yx[4].innerHTML = yingxiong[tmd[4][0]];
		yx[5].innerHTML = yingxiong[tmd[5][0]];
		yx[6].innerHTML = yingxiong[tmd[6][0]];
		yx[7].innerHTML = yingxiong[tmd[7][0]];
		yx[8].innerHTML = yingxiong[tmd[8][0]];
		yx[9].innerHTML = yingxiong[tmd[9][0]];

		var zs = document.getElementsByClassName('zs')
		zs[0].innerHTML = tmd[0][1];
		zs[1].innerHTML = tmd[1][1];
		zs[2].innerHTML = tmd[2][1];
		zs[3].innerHTML = tmd[3][1];
		zs[4].innerHTML = tmd[4][1];
		zs[5].innerHTML = tmd[5][1];
		zs[6].innerHTML = tmd[6][1];
		zs[7].innerHTML = tmd[7][1];
		zs[8].innerHTML = tmd[8][1];
		zs[9].innerHTML = tmd[9][1];

		var kda = document.getElementsByClassName('kda')
		kda[0].innerHTML = tmd[0][2];
		kda[1].innerHTML = tmd[1][2];
		kda[2].innerHTML = tmd[2][2];
		kda[3].innerHTML = tmd[3][2];
		kda[4].innerHTML = tmd[4][2];
		kda[5].innerHTML = tmd[5][2];
		kda[6].innerHTML = tmd[6][2];
		kda[7].innerHTML = tmd[7][2];
		kda[8].innerHTML = tmd[8][2];
		kda[9].innerHTML = tmd[9][2];

		var ms = document.getElementsByClassName('ms')
		ms[0].innerHTML = tmd[0][3];
		ms[1].innerHTML = tmd[1][3];
		ms[2].innerHTML = tmd[2][3];
		ms[3].innerHTML = tmd[3][3];
		ms[4].innerHTML = tmd[4][3];
		ms[5].innerHTML = tmd[5][3];
		ms[6].innerHTML = tmd[6][3];
		ms[7].innerHTML = tmd[7][3];
		ms[8].innerHTML = tmd[8][3];
        ms[9].innerHTML = tmd[9][3];
        

        var aarr=document.querySelectorAll('a');
        for(var i=1;i<aarr.length;i++){
            if(i==3)continue
             var idname = searchid();
            aarr[i].href=aarr[i].href+"?"+idname+"id$";
        }
	</script>


</body>

</html>